@import'./modules/base';
@import'./modules/header.scss';
@import'./modules/floatbar.scss';
@import'./modules/footer.scss';

@mixin tabbox-adjust($height:303px) {
    height: $height;
    border-bottom: 1px solid #e2e2e2;
}
@mixin tab-btn {
    width: 70px;
    height: 48px;
    line-height: 48px;
    font-size: 15px;
    color: #999999;
    text-align: center;
    cursor: pointer;
}

// location
.Location{
    height: 45px;
}

// cantainer
.cantainer{
    width: 1170px;
    margin: 0 auto;
    background-color: #ffffff;
    margin-bottom: 24px;
    box-shadow: 2px 2px 4px rgba(9,9,9,.1);

    // tab切换
    .tab-top{
        height: 50px;
        border-bottom: 1px solid #e2e2e2;
        position: relative;
        display: flex;
        .tab-btn1{
            @include tab-btn();
            margin-left: 430px; 
        }
        .tab-btn2{
            @include tab-btn();
            margin-left: 161px; 
        }
        .change-tab{
            font-size: 14px;
            color: #333333;
            border-bottom: 2px solid #848484;
        }
    }

    .tab-wrap{
        width: 100%;
        overflow: hidden;
        // 登陆
        .tab-login{
            display: none;
            margin-top: 0px;
            @include tabbox-adjust();
            .login-form{
                width: 370px;
                padding-top: 34px;
                float: left;
                .form-group{
                    height: 55px;
                    margin-bottom: 19px;
                    label{
                        display: block;
                        font-size: 14px;
                        color: #999999;
                    }
                    input{
                        width: 358px;
                        height: 36px;
                        border: 1px solid #d7d7d7;
                        border-radius: 4px;
                        padding-left: 10px;
                        box-shadow: 0px 1px 3px rgba(9,9,9,.1) inset;
                    }
                    .inp-button{
                        width: 368px;
                        background-color: #8975b4;
                        text-align: center;
                        font-size: 14px;
                        color: #fff;
                        cursor: pointer;
                        border: none;
                        box-shadow:2px 2px 3px rgba(5,5,5,.3) ;
                    }
                }
                .autologin{
                    height: 49px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 14px;
                    color: #3e3a39;
                    span{
                        display: flex;
                        align-items: center;
                        height: 14px;
                        
                    }
                    a{
                        color: #3e3a39;
                    }
                }
            }
        }

        // 注册
        .tab-register{
            @include tabbox-adjust(521px);
            display: none;
            .register-form{
                width: 370px;
                padding-top: 43px;
                display: flex;
                flex-direction: column;
                float: left;
                .form-group2{
                    margin-bottom: 17px; 
                    // input提示
                    label{
                        display: flex;
                        align-items: center;
                        font-size: 12px;
                        height: 14px;
                        color: #999999;
                    }
                    // 星号
                    .icon-import{
                        display: block;
                    }
                    .inp-style{
                        width: 358px;
                        height: 36px;
                        border: 1px solid #d7d7d7;
                        color: rgb(146, 145, 144);
                        border-radius: 4px;
                        padding-left: 10px;
                        margin-top: 2px;
                        box-shadow: 0px 1px 3px rgba(9,9,9,.1) inset;
                    }
                    // 验证码
                    &:nth-child(2){
                        .yanzhengma{
                            width: 246px;
                            height: 38px;
                            float: left;
                            margin: 0px;
                        }
                        .yanzheng-refresh{
                            float: left;
                            width: 124px;
                            height: 38px;
                            margin: 0px;
                            background-color: #8975b4;
                            color: #fff;
                            cursor: pointer;
                        }
                    }
                    // 短信验证码
                    &:nth-child(3){
                        .inp-style{
                            width: 244px;
                            float: left;
                        }
                        .yanzheng-send{
                            width: 114px;
                            height: 38px;
                            background-color: #8975b4;
                            margin-top: 2px;
                            color: #fff;
                            float: left;
                            cursor: pointer;
                        }
                    }
                }
                // 同意协议
                .agreement-pass{
                    height: 12px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 14px;
                    color: #3e3a39;
                    span{
                        display: flex;
                        align-items: center;
                        height: 12px;
                        
                    }
                    a{
                        color: #959ca8;
                        text-decoration: underline;
                    }
                }
                // 同意注册按钮
                .pass-input{
                    .pass-button{
                        width: 368px;
                        height: 36px;
                        background-color: #8975b4;
                        text-align: center;
                        font-size: 14px;
                        color: #fff;
                        cursor: pointer;
                        border: none;
                        box-shadow:2px 2px 3px rgba(5,5,5,.3) ;
                        margin-top: 8px;
                    }
                    .ps-import{
                        text-align: right;
                        font-size: 12px;
                        height: 14px;
                        margin-top: 3px;
                        color: #666666;
                    }
                }
            }
        }
        .change{
            display: block;
        }
        // 占位空盒子
        .placeholder-box{
            width: 400px;
            height: 100%;
            float: left;
        }
        // 二维码
        .erweima{
            margin-top: 40px;
            margin-left: 66px;
            float: left;
            img{
                width: 199px;
                height: 199px;
            }
        }
    }
}

// 注册成功弹出框
.alert1{
    display: none;
    width: 450px;
    height:300px;
    z-index: 9999999;
    position: fixed;
    left: 33%;
    top: 30%;
    border-radius: 20px;
    background-color: rgb(76, 212, 212);
    box-shadow: 5px 5px 10px rgba(48, 52, 54, 0.7);
    .suprise{
        margin: 0 auto;
        margin-top: 50px;
        width: 350px;
        height: 200px;
        background-color: #ecf5f7;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        box-shadow: 10px 10px 10px rgba(48, 91, 122, 0.7);
        p{
            font-size: 14px;
            color: rgb(16, 134, 134);
            &:nth-child(1){
                font-size: 20px;
                font-weight: 600;
                color: rgb(41, 40, 40);
                margin-bottom: 10px;
            }
        }
    }
}

// 登陆成功弹出框
.alert2{
    display: none;
    width: 450px;
    height:300px;
    z-index: 9999999;
    position: fixed;
    left: 33%;
    top: 30%;
    border-radius: 20px;
    background-color: rgb(76, 212, 212);
    box-shadow: 5px 5px 10px rgba(48, 52, 54, 0.7);
    .suprise2{
        margin: 0 auto;
        margin-top: 50px;
        width: 350px;
        height: 200px;
        background-color: #ecf5f7;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        box-shadow: 10px 10px 10px rgba(48, 91, 122, 0.7);
        p{
            font-size: 14px;
            color: rgb(16, 134, 134);
            &:nth-child(1){
                font-size: 20px;
                font-weight: 600;
                color: rgb(41, 40, 40);
                margin-bottom: 10px;
            }
        }
    }
}